<template>
  <head class="flex bg-white">
    <div class="flex items-center">
      <div>
        <div class="flex">
          <span>头部</span>
        </div>
        <div class="flex sub-title text-xs mt-1">
          副标题
        </div>
      </div>
    </div>
  </head>
</template>

<script>
export default {
  name: 'ChatHead'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.flex{
  display: flex;
}
.bg-white{
  background-color: #ffffff;
}
.sub-title{
  display: block;
}
.items-center{
  align-items: center;
}
.text-xs{
  font-size: .75rem;
}
.mt-1{
  margin-top: .25rem;
}
</style>
